<template>
  <div class="nsw-container">
    <el-dialog
      v-dialog-drag
      title="合同二维码"
      :visible.sync="dialogQrVisible"
      width="400px"
      :close-on-click-modal="false"
      :before-close="closeQrCode"
    >
      <div style="text-align: center">
        <el-image :src="QrCodeSrc" v-show="QrStatus === 0">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <div v-show="QrStatus !== 0">
          <div v-show="QrStatus === 1">
            <div>
              <span class="iconfont icon-tijiaochenggong status-icon"></span>
            </div>
            <div class="status-text"><span>已扫码</span></div>
          </div>
          <div v-show="QrStatus >= 4">
            <div>
              <span class="iconfont icon-zhifuchaoshi status-icon"></span>
            </div>
            <div class="status-text"><span>已过期</span></div>
          </div>
          <div v-show="QrStatus === 3">
            <div>
              <span class="iconfont icon-gongdanqueren status-icon"></span>
            </div>
            <div class="status-text"><span>已确认</span></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ContractQrCode",
  props: ["dialogQrVisible", "QrStatus", "QrCodeSrc"],
  methods: {
    closeQrCode() {
      this.$emit("closeQrCode");
    },
  },
};
</script>

<style lang="scss" scoped>
.status-icon {
  font-size: 100px;
  color: #f4ea2a;
}
.status-text {
  margin: 30px 0;
  span {
    font-size: 28px;
  }
}
</style>
